<template>
    <div>
        <div class="flex justify-between mb-[23px]">
            <div>
                <button class="toggle-btn" :class="[open && 'open']" @click="toggle">{{ open ? '隐藏列' : '列' }}</button>
                <button class="reset-btn">重置表</button>
                <span>{{ productInfo.current }}个产品(共{{ productInfo.total }}个)</span>
            </div>
            <div>
                登陆以下载excel
                <button class="login-btn">登录</button>
            </div>
        </div>
        <div class="flex h-[855px]">
            <div class="sort-col w-[190px] bg-f8" v-if="open">
                <span class="h-[96px] text-center inline-block w-full leading-[96px]">列筛选</span>
                <ul>
                    <li v-for="(item, index) in sortList" :key="index" class="flex items-center" @click="handleSort(item)">
                        <img :src="checked.src" alt="" class="w-[14px] h-[14px] ml-[21px]" v-if="item.checked">
                        <img :src="unchecked.src" alt="" class="w-[14px] h-[14px] ml-[21px]" v-else>
                        <span class="ml-[20px]">{{ item.label }}</span>
                    </li>
                </ul>
            </div>
            <div>
                <table>
                    <thead>
                        <tr>
                            <th v-for="item in columns">{{ item.label }}</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td v-for="(_, index) in columns" :key="index" class="">
                                <div class="sort">
                                    <img :src="sort.src" alt="">
                                </div>

                            </td>
                        </tr>
                        <tr v-for="(item,index) in tableData" :class="item.isChild&&!tableData[item.parent].showChild?'hidden':''">
                            <td v-for="(_, index) in columns" :key="index" class="relative" :class="_.key">
                                <div class="sort relative" v-if="_.slot=='img'">
                                    <img :src="item[_.key]" alt="">
                                   <div class="w-[240px] h-[178px] bg-white absolute right-[-260px] p-[10px] box-border popup">
                                    <img :src="item[_.key]" class="w-[190px]" alt="">
                                    <div class="popup_des">
                                        <div>6-LEDA </div>
                                       <div>1.5×1.5×0.85mm DFN</div>
                                    </div>
                                   </div>
                                </div>
                             <span v-else :class="['flex items-center relative',_.key]" @click="handleClickItem(item)">
                                <img :src="down.src" alt="" class="w-[16px] h-[16px] mr-[6px]" :class="{'rotate180': item.showChild }" v-if="_.key=='a1'&&!item.isChild">
                             <a href="/productDetailInfoData" v-if="_.key=='a1'">{{ item[_.key] }}</a>
                             <span v-else> {{ item[_.key] }}</span>
                            </span>
                                <div class="flex child_des"  v-if="_.key=='a1'&&item.isChild">
                                    数据表:
                                    <span class="cursor-pointer">PDF</span>|
                                    <span class="cursor-pointer">HTML</span>
                                </div>
                                <div class="w-[390px] bg-white absolute top-[-54px] right-[-390px] p-[10px] box-border popup"  v-if="_.key=='a1'&&!item.isChild">
                                  <div class="flex justify-between">
                                    <div class="popup_child_des">
                                        <div class="child_tit">{{ item.a1 }}</div>
                                        <div class="text-3d w-[213px]">{{ item.a12 }}</div>
                                    </div>
                                    <img :src="item['a2']" class="w-[110px]" alt="">
                                  </div>
                                  <div class="flex mt-[10px]">
                                  
                                    <div class="z-10 relative">
                                      <div>
                                        <span class="mt-[4px] cursor-pointer">查看数据手册</span>
                                      </div>
                                       <span class="mt-[4px] cursor-pointer">View Documentation（查看文档）</span>
                                    </div>
                                    <img :src="image2.src" class="w-[110px]" style="border: 1px dashed gray" alt="">
                                </div>
                                   </div>
                            </td>
                            <tbody>
                          
                        </tbody>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { reactive, ref } from 'vue';
import sort from '@assets/sort.png'
import unchecked from '@assets/unchecked.png'
import checked from '@assets/checked.png'
import ES50302 from '@assets/ES50302.png'
import down from '@assets/down.png'
import image2 from '@assets/image2.png'
const productInfo = reactive({
    total: 1,
    current: 1
})
const open = ref(false);
const sortList = reactive([
    { label: '图像', checked: false },
    { label: '通道数量', checked: false },
    { label: '输入电压最小(V)', checked: false },
    { label: '输入电压最大(V)', checked: false },
    { label: '输出电压最小(V)', checked: false },
    { label: '输出电压最大(V)', checked: false },
    { label: '静态电流(uA)', checked: false },
    { label: '工作温度(°C)', checked: false },
    { label: 'pin脚数量', checked: false },
    { label: '封装', checked: false }
]);

const columns = reactive([
    {key:'a1', label: '产品类型' },
    {key:'a2', label: '图像',slot:'img' },
    {key:'a3', label: '通道数量' },
    {key:'a4', label: '输入电压最小(V)' },
    {key:'a5', label: '输入电压最大 (V)' },
    {key:'a6', label: '输出电压最小 (V)' },
    {key:'a7', label: '输出电压最大(V)' },
    {key:'a8', label: '静态电流 (uA)' },
    {key:'a9', label: '工作温度' },
    {key:'a10', label: 'Pin脚数量' },
    {key:'a11', label: '封装' },
    {key:'a12', label: '特性' }]);

    const tableData = reactive([
   {  'a1': 'ES5030 新品' ,
     'a2': ES50302.src ,
     'a3': 1 ,
     'a4': 2.6 ,
     'a5': 5.5 ,
     'a6': 0.6 ,
     'a7': 4 ,
     'a8': 30 ,
     'a9': '-40~125℃' ,
     'a10': 'Pin-6' ,
     'a11': 'DFN-6' ,
     'a12': '123特性特点',
     'isChild': false,
     'showChild': false,
    },
    {  
     'isChild': true,
     'parent': 0,
     'a1': 'ES5030 新品' ,
     'a2': ES50302.src ,
     'a3': 1 ,
     'a4': 2.6 ,
     'a5': 5.5 ,
     'a6': 0.6 ,
     'a7': 4 ,
     'a8': 30 ,
     'a9': '-40~125℃' ,
     'a10': 'Pin-6' ,
     'a11': 'DFN-6' ,
     'a12': '123特性特点'
    }

]);
const toggle = () => {
    open.value = !open.value
}
const handleSort = (item) => {
    item.checked = !item.checked
}
const handleClickItem= (item) => {
   if(!item.isChild){
    item.showChild=!item.showChild
   }
}
</script>
  
  /* Add this style to your Vue component */
<style scoped lang="scss">

.popup{
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    z-index: 2;
    border: 1px solid #D8D8D8;
    display: none;
    img{
        position: relative;
        z-index: 3;
    }
    &::before{
        content: "";
    width: 30px;
    height: 30px;
    background-color: #fff;
    position: absolute;
    left: -15px;
    transform: rotateZ(45deg);
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    top: 70px;
    }
    &::after{
        content: "";
    width: 30px;
    height: 44px;
    background-color: #fff;
    position: absolute;
    top: 64px;
    left: 0px;
    }
    &_des{
        border-top: 1px solid #D8D8D8;
        padding-top: 10px;
        word-break: keep-all;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .child_tit{
        font-family: Source Han Sans;
        font-weight: 500;
        font-size: 18px;
    }
    &_child_des{
        border-bottom: 1px solid #D8D5D5;
        padding-bottom: 30px;
        width: 214px;
    }
}
.a1{
    color: #712C2F;
    &:hover{
        .popup{
            display: block;
        }
    }
}
.child_des{
    span{
        color: #712C2F;
        border-bottom: 0px solid #712C2F;
    }
}
.rotate180{
    transform: rotateZ(180deg);
    transition: transform 0.5s;
}
.sort-col {
    color: #3D3D3D;
    font-size: 16px;
    flex-shrink: 0;

    li {
        margin-bottom: 25px;
        font-family: Source Han Sans;
        color: #3D3D3D;
    }
}


.reset-btn {
    color: #78A7DF;
    margin-left: 38px;
    margin-right: 37px;
}

.login-btn {
    border-radius: 2px;
    opacity: 1;
    box-sizing: border-box;
    border: 1.2px solid #712C2F;
    background-color: #fff;
    color: #712C2F;
    padding: 3px 19px;
    margin-left: 20px;

    &:hover {
        background-color: #712C2F;
        color: #fff;
    }
}

.toggle-btn {
    color: #712C2F;
    border-radius: 2px;
    background: #fff;
    box-sizing: border-box;
    border: 1.2px solid #712C2F;
    padding: 4px 14px;

    &.open {
        background-color: #712C2F;
        color: #fff;
    }
}

table th {
    position: sticky;
    top: 0;
    /* 首行永远固定在头部  */
}

table td:last-child,
table th:last-child {
    position: sticky;
    right: 0;
    /* 首列永远固定在左侧 */
    z-index: 1;
}

table td:last-child {
    background-color: #fff;
}

table th:last-child {
    z-index: 2;
    /*表头的首列要在上面*/
}

.sort {
    width: 90px;
    height: 27px;
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover{
        .popup{
            display: block;
        }
    }
}

table {
    width: calc(100% - 190px);
    border-collapse: collapse;
    text-align: left;
    // margin-top: 20px;
    table-layout: fixed;
}

thead tr th {
    position: sticky;
    top: 0;
}

th,
td {
    padding: 8px 16px;
    border: 1px solid #ccc;
    width: 180px;
    height: 60px;
}

th {
    background-color: #712C2F;
    /* Adjust the color to match the header background in your image */
    color: #fff;
    /* Adjust the color to match the header text color in your image */
    width: 180px;
    text-align: center;
    font-size: 14px;
}

tr:nth-child(even) {
    background-color: #fafafa;
    /* Adjust the color for zebra striping if needed */
}
tr:hover{
    background: #D8D5D5;
    td:last-child {
        background: #D8D5D5;
}
}
td:hover{
    span{
        border-bottom-width: 1px;
    }
}

/* Add more specific styles if necessary */</style>
